<template>
  <div class="user-info-edit-page-wrapper">
    <div class="info-main">

      <div class="info-category">
        <ul class="info-category-list">
          <li v-for="(item, idx) in infoCategories"
          :key="idx" :class="{
            bgSelectGray: idx===selectIdx,
            colorBlue: idx===selectIdx
          }"
          @click="this.selectIdx = idx"
          >{{item}}</li>
        </ul>
      </div>

      <div class="info-edit">

        <user-base-info class="user-base-info"></user-base-info>

        <component :is="selectIdx ? 'UserAccountInfoEdit' : 'UserNormalInfoEdit'"
        class="user-info-edit-card"></component>
        
      </div>
    </div>
  </div>
</template>

<script>
import UserBaseInfo from './profile/UserBaseInfo.vue'
import UserNormalInfoEdit from './edit/UserNormalInfoEdit.vue'
import UserAccountInfoEdit from './edit/UserAccountInfoEdit.vue'

  export default {
    components: {
      UserBaseInfo,
      UserNormalInfoEdit,
      UserAccountInfoEdit
    },
    data() {
      return {
        infoCategories: [
          '基本信息', '账户信息'
        ],
        selectIdx: 0,
        infoMap: new Map([
          ['username', '用户名'],
          ['avatar', '头像'],
          ['nickname', '昵称'],
          ['sex', '性别'],
          ['sign', '格言'],
          ['birthday', '生日'],
          ['location', '住址'],
          ['education', '文凭'],
          ['university', '大学'],
          ['direction', '主攻方向'],
          ['email', '邮箱'],
          ['userpwd', '密码']
        ]),
        infoPlaceholderMap: new Map([
          ['username', 'NoName'],
          ['avatar', '头像'],
          ['nickname', '小可爱'],
          ['sex', '你是雌性还是雄性？'],
          ['sign', '写下你的格言吧！'],
          ['birthday', '你在哪一天出生呢？'],
          ['location', '你住在哪里呢？'],
          ['education', '你的文凭是什么呢？'],
          ['university', '你毕业于哪所大学呢？'],
          ['direction', '主攻方向'],
          ['email', '邮箱'],
          ['userpwd', '密码']
        ])
      }
    },
    methods: {
      renewInfo(newVal, key) {
        let kvp = {key, value: newVal};
        if(this.selectIdx) {
          this.$store.commit('changeAccountInfo', kvp);
        } else {
          this.$store.commit('changeBaseInfo', kvp);
        }
      }
    },
    computed: {
      userInfos() {
        if(this.selectIdx) return this.userAccountInfos;
        else return this.userBaseInfos;
      },
      userInfoKeys() {
        let keys = Object.keys(this.userInfos);
        keys.sort((a, b) => a < b ? -1 : 1);
        return keys;
      }
    },
    mounted () {
    },
  }
</script>

<style lang="less" scoped>
.user-info-edit-page-wrapper {
  width: var(--innerWidth);
  min-height: 800px;
  margin: 0 auto;

  .info-main {
    margin-top: 10px;
    height: 800px;
    --w1: calc(0.25 * var(--innerWidth));
    --w2: calc(0.73 * var(--innerWidth));

    .info-category,
    .info-edit {
      box-sizing: border-box;
      height: 100%;
    }

    .info-category {
      float: left;
      width: var(--w1);
    }

    .info-edit {
      float: right;
      width: var(--w2);
    }
  }

  .info-category {
    padding: 10px 0;
    background-color: white;
    text-align: center;

    .info-category-list {
      line-height: 50px;
      font-size: 16px;

      li:hover {
        background-color: var(--selectGray);
        cursor: pointer;
      }
    }
  }

  .info-edit {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .user-base-info {
      --userBaseInfoWidth: var(--w2);
      --userBaseInfoHeight: 140px;
    }

    .user-info-edit-card {
      margin-top: 10px;
      --userNormalInfoEditWidth: var(--w2);
      --userAccountInfoEditWidth: var(--w2);
    }
  }
}
</style>